/*
 * @Author: redman9
 * @Date: 2018-10-22 15:24:39
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-26 21:04:04
 */
<template>
    <div class="container user-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择城市：">
                            <el-select
                                v-model="filterData.city_id"
                                filterable
                                @change="fnCityChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.city_id"
                                    :label="item.name"
                                    :value="item.city_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择学校：">
                            <el-select
                                v-model="filterData.school_id"
                                filterable
                                @change="fnSchoolChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.school_id"
                                    :label="item.name"
                                    :value="item.school_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="小B搜索">
                            <el-input
                                v-model="filterData.contact"
                                placeholder="请输入手机号/微信号" />
                        </el-form-item>
                    </el-col>

                    <el-col
                        class="search-btn-wrapper"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="agent_no"
                        min-width="150"
                        label="代理编号"/>
                    <el-table-column
                        fixed="left"
                        :formatter="emptyFormatter"
                        prop="user.nickname"
                        show-overflow-tooltip
                        :width="150"
                        label="小B名称" />
                    <el-table-column
                        prop="school[0].name"
                        :formatter="emptyFormatter"
                        :width="150"
                        show-overflow-tooltip
                        label="学校名称">
                        <template slot-scope="scope">
                            <template>{{ showSchoolList(scope.row.school) }}</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="title"
                        show-overflow-tooltip
                        :width="150"
                        label="主页名称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="phone"
                        min-width="110"
                        label="手机号">
                        <template slot-scope="scope">
                            <template v-if="scope.row.phone">{{ scope.row.phone }}</template>
                            <template v-else>{{ scope.row.wechat }}</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="fans_count"
                        :min-width="114"
                        label="粉丝数" />
                    <el-table-column
                        prop="subscribe_platform"
                        :min-width="140"
                        label="是否关注公众号">
                        <template slot-scope="scope">
                            <template v-if="scope.row.subscribe_platform == 0">否</template>
                            <template v-if="scope.row.subscribe_platform != 0">是</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="auto_up_task"
                        :min-width="140"
                        label="是否自动上架">
                        <template slot-scope="scope">
                            <template v-if="scope.row.auto_up_task == 0">否</template>
                            <template v-if="scope.row.auto_up_task != 0">是</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="create_time"
                        min-width="140"
                        label="创建时间">
                        <template slot-scope="scope">
                            <template v-if="scope.row.create_time">{{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                            <template v-else>--</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="status"
                        label="操作"
                        fixed="right"
                        width="150">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                class="btn-delete"
                                @click="fnChangeStatus(scope.row.agent_no, scope.row.status)">
                                <template v-if="scope.row.status == 1">拉黑</template>
                                <template v-else>取消拉黑</template>
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            authResult: {},
            tableData: [],
            filterData: {
                city_id: '',
                school_id: '',
                contact: '',
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            transformIds: [],
            cityList:[{
                city_id: '',
                name: '全部'
            }],
            schoolList: [{
                school_id: '',
                name: '全部'
            }]
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: "查看小B"
            }
        ]);
        this.getTableData();
        this.getCityList();
    },
    methods: {
        showSchoolList(school) {
            let name = '';

            if(school) {
                for(let i = 0; i < school.length; i++) {
                    if(name) {
                        name += '/';
                    }
                    name += school[i].name;
                }
            }else{
                name = '--';
            }
            return name;
        },
        /**
         * 更改城市
         */
        fnCityChange() {
            this.filterData.school_id = '';
            this.getSchoolList();
            this.getTableData(1);
        },
        /**
         * 更改学校
         */
        fnSchoolChange() {

            // for(let i = 0; i < this.schoolList.length; i++) {
            //     if(this.school_id == this.schoolList[i].school_id) {
            //         this.school_name = this.schoolList[i].name;
            //     }
            // }
            this.filterData.academy_no = '';
            this.getTableData(1);
        },

        /**
         * 获取城市列表
         */
        getCityList() {
            this.$post('/task/base_city%5Cget_simple_list', {
                type: 99
            }, resp => {
                if (resp.code == 1) {
                    this.cityList = resp.data.list;
                    this.cityList.unshift({
                        city_id: '',
                        name: '全部'
                    });
                }
            });
        },
        /**
         * 获取学校列表
         */
        getSchoolList() {
            this.$post('/task/base_school%5Cget_simple_list', {
                city_id: this.filterData.city_id
            }, resp => {
                if (resp.code == 1) {
                    this.schoolList = resp.data.list;
                    this.schoolList.unshift({
                        school_id: '',
                        name: '全部'
                    });
                }
            });
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {

            this.$post('/task/agent%5Cget_list', {
                page_id: page || this.page.now_page,
                school_id: this.filterData.school_id,
                contact: this.filterData.contact,
                city_id: this.filterData.city_id
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },
        fnChangeStatus(no, status) {
            this.$post('/task/agent%5Cset_status', {
                agent_no: no,
                status: status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    for(let i = 0; i < this.tableData.length; i++) {
                        if(this.tableData[i].agent_no == no) {
                            this.tableData[i].status = status == 1 ? 0 : 1;
                        }
                    }
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}

.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>